<template>
  <div v-show="active" class="mask-view w-screen h-screen cursor-pointer" @click="onShutDown">
    <slot/>
  </div>
</template>

<script setup lang="ts">
interface Props {
  active?: boolean
}

const emits = defineEmits(["close"])
const rawProps = withDefaults(defineProps<Props>(), {
  active: false
})
const {active} = toRefs(rawProps)

function onShutDown() {
  emits("close")
}
</script>

<style scoped>
.mask-view {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
</style>